<template>
    <div>
        <div class="filter-container">
            <el-form :inline="true">
                <el-form-item title="日期" prop="day">
                    <picker-date-range v-model="search.day" :clearable="false"></picker-date-range>
                </el-form-item>
                <el-form-item title="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="pageNo = 1;handleSearch()">搜索</el-button>
                    <el-button class="filter-item" @click="exportExcel" v-if="$ENABLE_EXPORT">导出本页</el-button>
                </el-form-item>
            </el-form>
        </div>

<!--        <vxe-toolbar ref="xToolbar" custom>-->
<!--            <template #tools>-->
<!--                <vxe-button @click="exportExcel" v-if="$ENABLE_EXPORT">导出本页</vxe-button>-->
<!--            </template>-->
<!--        </vxe-toolbar>-->
        <vxe-table
            :loading="loading"
            ref="xTable"
            highlight-hover-row
            style="width: 100%"
            class="text-center"
            :row-class-name="tableRowClassName"
            show-footer
            :footer-method="footerMethod"
            :max-height="maxHeight">
            <vxe-table-column title="日期" field="day" min-width="90" fixed="left"/>
            <vxe-table-colgroup title="用户总览">
                <vxe-table-column title="注册数" field="registerUser" formatter="formatHuman" min-width="80"/>
                <vxe-table-column title="DAU" field="loginUser" formatter="formatHuman" min-width="80"/>
                <vxe-table-column title="DAU-注册" field="loginOldUser" formatter="formatHuman" min-width="80"/>
<!--                <vxe-table-column title="MDAU" field="monthLoginUser" formatter="formatHuman" min-width="80"/>-->
                <vxe-table-column title="DAU/MDAU" field="loginUserInMonthScale" :formatter="['formatPercent', 2]" min-width="110" :title-help="{message: '活跃用户/截止到当日的当月活跃用户'}"/>
                <vxe-table-column title="最高同时在线" field="maxOnline" formatter="formatHuman" min-width="100"/>
            </vxe-table-colgroup>

            <vxe-table-colgroup title="平台收支数据">
                <vxe-table-column title="充值金额" field="pay" formatter="formatHumanRmb" min-width="80"/>
                <vxe-table-column title="支付宝充值金额" field="payAlipay" formatter="formatHumanRmb" min-width="110"/>
                <vxe-table-column title="支付宝通道费用" field="payChannelFeeAlipay" formatter="formatHumanRmb" min-width="110"/>
<!--                <vxe-table-column title="微信充值金额" field="payWechat" formatter="formatHumanRmb" min-width="100"/>-->
<!--                <vxe-table-column title="微信通道费用" field="payChannelFeeWechat" formatter="formatHumanRmb" min-width="100"/>-->
                <vxe-table-column title="充值人数" field="payUser" formatter="formatHuman" min-width="80"/>
                <vxe-table-column title="首日充值人数" field="payFirstUser" formatter="formatHuman" min-width="100"/>
                <vxe-table-column title="首日充值率" field="payFirstUserScale" formatter="formatPercent" min-width="90"/>
                <vxe-table-column title="ARPPU" field="arppu" :formatter="['formatHumanRmb', 2]" min-width="80"/>
                <vxe-table-column title="ARPU" field="arpu" :formatter="['formatHumanRmb', 2]" min-width="80"/>
<!--                <vxe-table-column title="权益人数" field="withdrawUser" formatter="formatHuman" min-width="80"/>-->
<!--                <vxe-table-column title="权益交换" field="withdraw" formatter="formatHumanRmb" min-width="80"/>-->
                <vxe-table-column title="积分人数" field="thirdExchangeUser" formatter="formatHuman" min-width="80"/>
                <vxe-table-column title="兑换积分" field="thirdExchange" :formatter="['formatW', 1]" min-width="80"/>
                <vxe-table-column title="积分比例" field="thirdExchangePayScale" :formatter="['formatPercent', 2]" min-width="80"/>
<!--                <vxe-table-column title="权益通道费用" field="withdrawChannelFee" formatter="formatHumanRmb" min-width="100"/>-->
<!--                <vxe-table-column title="权益交换卡" field="withdrawJd" formatter="formatHumanRmb" min-width="80"/>-->
                <vxe-table-column title="推广费" field="spreadCost" formatter="formatHumanRmb" min-width="90"/>
<!--                <vxe-table-column title="平台毛利" field="platformProfit" formatter="formatHumanRmb" min-width="90" :title-help="{message: '充值'}"/>-->
<!--                <vxe-table-column title="运营毛利" field="operationProfit" formatter="formatHumanRmb" min-width="90" :title-help="{message: '充值 - 充值通道费用 - 推广费'}"/>-->
            </vxe-table-colgroup>
        </vxe-table>

    </div>
</template>

<script>

import VXETable from "vxe-table";

export default {
    components: {

    },
    data() {
        return {
            search: {
                source: '',
                source_type: '',
                day: [],
            },
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 20,
            totalDataNumber: 0,
            pageOptions: this.$store.state.backend.pageOptions,
            pageCount: 0,
            options: this.$store.state.operation.options.bulletLog,
            footer: [],
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 250;
        }
    },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val;
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.$store.dispatch('spreadData/DayStat', filter).then(({data}) => {
                // this.tableData = data.data;
                this.footer = data.footer;
                this.$refs.xTable.reloadData(data.data);
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.initSearchDate();
            this.handleSearch();
        },
        initSearchDate() {
            this.search.day = [
                moment().startOf('M').unix(),
                moment().endOf('M').unix(),
            ];
        },
        tableRowClassName({row, rowIndex}) {
            if (row.operationProfit === 0) return '';
            if (row.operationProfit < 0) return 'color-danger';
            return 'color-success';
        },
        footerMethod({ columns, data }) {
            return this.$helper.vxeFooter(columns, data, (index, property) => {
                return ['loginUserInMonthScale', 'loginOldUser', 'maxOnline'].includes(property);
            }, (sums, allFields) => {
                // 使用footer中去重的用户数据
                sums[allFields.loginUser] = this.footer.loginUser || 0;
                sums[allFields.payUser] = this.footer.payUser || 0;
                sums[allFields.thirdExchangeUser] = this.footer.thirdExchangeUser || 0;

                // 计算 payFirstUserScale
                sums[allFields.payFirstUserScale] = this.$helper.calcDivision(sums[allFields.payFirstUser], sums[allFields.registerUser]);
                // 计算 arpu
                sums[allFields.arpu] = this.$helper.calcDivision(sums[allFields.pay], sums[allFields.loginUser]);
                // 计算 arppu
                sums[allFields.arppu] = this.$helper.calcDivision(sums[allFields.pay], sums[allFields.payUser]);
                // 积分/充值
                sums[allFields.thirdExchangePayScale] = this.$helper.calcDivision(sums[allFields.thirdExchange]/this.$CURRENCY_HB_SCALE*100, sums[allFields.pay]);
                // 标识去重
                sums[allFields.loginUser] += ' 去重';
                sums[allFields.payUser] += ' 去重';
                sums[allFields.thirdExchangeUser] += ' 去重';

                return sums;
            });
        },
        exportExcel () {
            this.$refs.xTable.exportData({
                filename: '整体数据报表',
                type: 'xlsx'
            })
        },
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0 !important;
}
</style>

